<template>
	<view class="page">
		
		<!-- 骨架屏 -->
		<view class="u-demo-block" v-if="loading">
			<view class="u-demo-block__content">
				<custom-skeleton :loading="loading"></custom-skeleton>
			</view>
		</view>

		<view v-if="!loading">
			<!-- 轮播图 -->
			<view class="u-demo-block">
				<u-swiper :list="list5" @change="e => current = e.current" :radius="15"  keyName="image" @click="slideshowsub">
					<view slot="indicator" class="indicator">
						<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</u-swiper>
			</view>
			<u-sticky>
			<!-- 操作菜单 -->
			<view style="display: flex;
			justify-content: flex-start;
			width: 90%;margin: auto;
			margin-top: 40rpx;
			 background-color: #252928;
			 padding: 40rpx 0rpx;
			 ">
				<view class="handlemenu" v-for="(item,index) in menu" :class="menucurrent == index?'pitchontext': ''"
					@click="menclick(index)">{{item}}</view>
			</view>
			</u-sticky>
			<!-- menucurrent==0 -->

			<view>
				<template v-if="menucurrent==0">
					<crad :Cradlist="crad_list"> </crad>
				</template>
				<template v-if="menucurrent==1">
					<calendar></calendar>
				</template>
				<template v-if="menucurrent==2">
					<handpick></handpick>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import customSkeleton from '../../../components/customSkeleton/custom-skeleton.vue'
	import crad from '../../../components/crad/crad.vue'
	import calendar from '../../../components/calendar.vue'
	import handpick from '../../../components/handpick/handpick.vue'
	export default {
		data() {
			return {
				loading: false,
				list5: [],
				current: 0,
				menu: ['数字藏品', '发售日历', '内容精选'],
				menucurrent: 0,

				crad_list: [
					// {
					// 	new_date: '15:57:53',
					// 	img_url: '',
					// 	tilte: '透秀龙风纹铜俯首',
					// 	tilte_tag_img: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-698da70f-3b06-4c55-8457-df4a00210163/5ee06386-7309-46f8-a0ec-062638309a99.png',
					// 	tag_one: '源自馆藏',
					// 	tag_two: '限量',
					// 	tag_sum: '10000',
					// 	tag_three: '新春专题',
					// 	from_img: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-698da70f-3b06-4c55-8457-df4a00210163/563e220d-4750-45f8-8158-15f502165c88.png',
					// 	from_text: '河北博物馆',
					// 	price: 19.90
					// }
				]
			}
		},
		methods: {
			menclick(e) {
				this.menucurrent = e
				console.log(e)
			},
			slideshowsub(e){
				uni.navigateTo({
					url: this.list5[e].link
				})
			},
			getslideshow(){
				let that = this
				this.$base.request(this.serverPath.ad_list, 'GET', {
				}, false).then(function(data) {
					if(data.code == 200){
						that.list5 = data.data
					}else{
						console.log('接口请求失败')
					}
				})
			},
			getshoplist(){
				// 商品列表
				let that = this
				this.$base.request(this.serverPath.Nftproduct_list, 'GET', {
				}, false).then(function(data) {
					console.log(data)
					if(data.code == 200){
						that.crad_list = data.data
					}else{
						console.log('接口请求失败')
					}
				})
			}
		},
		components: {
			customSkeleton,
			crad,
			calendar,
			handpick
		},
		onLoad() {
			this.getshoplist()
			this.getslideshow()
			// 延时2秒钟
			uni.$u.sleep(2000).then(() => {
				this.loading = false
			})
		}
	}
</script>
<style lang="scss">
	.handlemenu {
		margin-right: 20rpx;
		color: #7f8282;
		font-weight: bold;
		font-size: 38rpx;
	}

	.pitchontext {
		color: #dee0df;
	}

	.u-demo-block {
		width: 90%;
		margin: auto;

		//margin-top: 20rpx;
		padding-top: 20rpx;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.page {
		position: static;
		margin-bottom: -20rpx;
	}
</style>
